<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <view style="display: flex;justify-content: space-between;align-items: center">
          <uni-section title="基础信息" type="line"/>
          <view style="padding-right: 20rpx">
            <text @click="handleBatchExportTable" style="margin-right: 20rpx;color: rgb(0, 0, 255);">下载表格</text>
            <text @click="handleBatchExportUpToStandard" style="color: rgb(0, 0, 255);">
              {{ !imgBoole ? '查看合格证' : '关闭合格证' }}
            </text>
          </view>
        </view>

      </view>

      <view v-if="imgBoole" style="margin: 20rpx">
        <uni-swiper-dot :info="imgUrl" :current="current" field="content" mode="round">
          <swiper class="swiper-box" @change="change">
            <swiper-item v-for="(item ,index) in imgUrl" :key="index">
              <image :src="item" style="width: 100%" @click="handleView(item)"/>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>

      <view style="margin: 8rpx 0 8rpx 20rpx">
        <uni-forms labelWidth="auto">
          <uni-forms-item label="车辆总台数:">
            <text>{{ ruleForm.carCount || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="合计费用:"
                          v-if="[2,3].includes(Number(ruleForm.insuranceChannels))">
            <text>{{ handleTotalPrice(ruleForm) }}</text>
          </uni-forms-item>

          <uni-forms-item label="客户名称:">
            <text>{{ ruleForm.customerName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="合同禀议号:">
            <text>{{ ruleForm.contractReportNumber || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="合同禀议内单车保险总金额:">
            <text>{{ ruleForm.totalSumAmount || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="采购禀议号:">
            <text>{{ ruleForm.procurementReportNumber || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="指导价:">
            <text>{{ ruleForm.guidancePrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="采购价:">
            <text>{{ ruleForm.purchasePrice }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆产权:">
            <text>{{ ruleForm.propertyRightName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆归属:">
            <text>{{ ruleForm.ascription || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆运营城市:">
            <text>{{ ruleForm.operationsName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆大区:">
            <text>{{ ruleForm.region || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="品牌:">
            <text>{{ ruleForm.brandName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车系:">
            <text>{{ ruleForm.seriesName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车型:">
            <text>{{ ruleForm.modelName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车架号:">
            <text>{{ ruleForm.vinNo || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车牌号:">
            <text>{{ ruleForm.carNo || '-' }}</text>
          </uni-forms-item>


          <uni-forms-item label="处理人:">
            <text>{{ ruleForm.processedByName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="处理时间:">
            <text>{{ ruleForm.processedByTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="工单创建时间:">
            <text>{{ ruleForm.createTime || '-' }}</text>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>

  </view>
</template>

<script>
import {listByIds} from '@/api/system/oss';

export default {
  name: 'basicInfo',//基础信息
  dicts: ['customer_type'],
  props: {
    value: {
      type: Object,
      default: {}
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    },
    handleTotalPrice() {
      return function (val) {
        let num = 0,
            numR = 0
        num = Math.round(Number(val.jqxAmount) * 100) +
            Math.round(Number(val.carTax) * 100) +
            Math.round(Number(val.syxAmount) * 100) +
            Math.round(Number(val.otherInsuranceSumAmount) * 100)
        numR = (val.carCount * num / 100).toFixed(2)
        this.$set(this.value, 'totalPrice', numR)
        this.$set(this.ruleForm, 'totalPrice', numR)
        return numR
      }
    }
  },
  data() {
    return {
      imgUrl: [],
      current: 0,
      imgBoole: false
    }
  },
  methods: {
    change(e) {
      this.current = e.detail.current;
    },

    handleView(url) {
      if (url) {
        uni.previewImage({
          urls: [url],
          fail: (err) => {
            console.error('错误:', err);
          },
        });
      }
    },

    handleBatchExportTable() {
      if (this.value?.workIdList.length > 0) {
        let ids = this.value.workIdList.join(',')
        this._download('/car/insurance/exportGetCarList', ids, `批量下载表格.xlsx`)
      }
    },

    // 优化后的 handleBatchExportUpToStandard 方法
    handleBatchExportUpToStandard() {
      if (this.value.qualifiedCardOssList && this.value.qualifiedCardOssList.length > 0) {
        // 使用 Promise.all 确保所有异步操作完成
        Promise.all(this.value.qualifiedCardOssList.map(async id => {
          try {
            const response = await listByIds(id);
            return response.data[0]?.url;
          } catch (error) {
            console.error(`在获取 ID: ${id} 的数据时出错`, error);
            return null;
          }
        })).then(urls => {
          this.imgUrl = urls;
          this.imgBoole = !this.imgBoole
        }).catch(error => {
          console.error('在获取 URL 时发生错误:', error);
        });
      }
    }

  }
};
</script>

<style lang="scss" scoped>
.car-wrap {
  display: flex;
  flex-direction: column;
  padding: 20rpx 20rpx 20rpx 0;
  border: 1px solid #dadada;
  margin: 10rpx 20rpx;
  border-radius: 8rpx;

}

.imageView {
  z-index: 99999;
  width: 100%;
  height: auto;

  .swiper-box {
    width: 100%;
    height: auto;

    .swiper-item {
      width: 100%;
      height: auto;
    }
  }
}

</style>


